<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>Todolist</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<style type="text/css">
		.top{
			margin-top: 10px;
			margin-bottom: 10px
		}
	</style>
</head>
<body>
	<div class="container" id="app">
		<div class="col-md-offset-4 col-md-4">
			<div class="page-header">
				TODO注册
			</div>
		</div>
		<div class="col-md-offset-4 col-md-4">
			
			<label for="name">请输入注册用户名：</label>
			<input id="name" type="text"  v-model="user.username" placeholder="请输入注册用户名" v-on:change="usernameValidate"></br>
			<span style="color:red" v-show="usernameflag">{{usernameMsg}}</span></br>
			<label for="password">请输入注册密码：</label>
			<input id="password" type="password"  v-model="user.password" placeholder="请输入注册密码"></br></br>
				
			<label for="phonenumber">请输入手机号：</label>
			<input id="phonenumber" type="text" v-model="user.phonenumber" placeholder="请输入您的手机号" v-on:change="phoneValidate"></br></br>
			<span v-show="phoneflag" style="color:red">{{phoneMsg}}</span><br/>
			<span style="color:red" v-show="isshow">{{error}}</span>
			<button class="btn btn-default btn-info" v-on:click="register" v-bind:disabled="disabled">注册</button>
		</div>
	
	</div>
</body>
</html>
<script type="text/javascript">

	var vue=new Vue({
		el:'#app',
		data:{
			msg:'TODO注册',
			user:{
				username:'',
				password:'',
				phonenumber:''
			},
			isshow:false,
			usernameflag:false,
			phoneflag:false,
			usernameMsg:'',
			phoneMsg:'',
			error:'',
			disabled:true
		},
		methods:{
			
			register:function(){
				axios.post('/20180519SpringmvcTodo/user/userRegister.do',this.user).then(function (result){
					if(result.data.status=="1"){
						document.location.href="registersuccess.html";
					}else{
						isshow=true;
						vue.error=result.data.msg;
						vue.user.username='';
						vue.user.password='';
						vue.user.phonenumber='';
					}
				}).catch(function(err){
					alert('wsnd');
				});
			},
			
			usernameValidate:function(){
				var param="username="+this.user.username;
				axios.get('/20180519SpringmvcTodo/user/userValidate.do',param).then(function(result){
					vue.usernameflag=true;
					if(result.data.status=="1"){
						//用户名可用来使用
						vue.usernameMsg=result.data.msg;
					}else{
						vue.usernameMsg=result.data.msg;
					}
				}).catch(function(err){
					alert('网络连接中断。。。');
				});
			},
			
			phoneValidate:function(){
				var param="phonenumber="+this.phonenumber;
				axios.get('/20180519SpringmvcTodo/user/phoneValidate.do',param).then(function(result){
					vue.phoneflag=true;
					if(result.data.status=="1"){
						//电话号可以用来使用
						vue.phoneMsg=result.data.msg;
						vue.disabled=false;
						alert(vue.disabled);
					}else{
						vue.phoneMsg=result.data.msg;
						alert(11111);
					}
				}).catch(function(err){
					alert('网络连接中断。。。');
				});
			}
			
		
		},
		mounted:function(){
			console.log('inited');
			this.isshow=false;
			this.usernameflag=false;
			this.phoneflag=false;
			//this.init();
		}
	});


</script>